<template>
  <div class="character-list">
    <div class="section-header">
      <i class="mdi mdi-account-group"></i>
      <h3>角色列表</h3>
    </div>
    <div
        v-for="character in characters"
        :key="character.id"
        class="character-item"
        :class="{ active: selectedCharacter?.id === character.id  }"
        @click="selectCharacter(character)"
    >
      <img
          :src="`https://mc-heads.net/avatar/${character.uuid}/50`"
          class="character-avatar"
          alt="avatar"
      >
      <span class="character-name">{{ character.name  }}</span>
    </div>
    <button class="add-character" @click="showCreateForm = true">
      <i class="mdi mdi-plus"></i> 添加角色
    </button>

    <!-- 创建角色弹窗 -->
    <el-dialog
        v-model="showCreateForm"
        title="创建新角色"
        width="500px"
        :before-close="handleClose"
    >
      <div class="form-group">
        <label>角色名称</label>
        <el-input v-model="newCharacter.name"  placeholder="输入角色名" />
      </div>
      <div class="form-group">
        <label>皮肤 UUID</label>
        <el-input v-model="newCharacter.uuid"  placeholder="输入 Minecraft UUID" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateForm = false">取消</el-button>
          <el-button type="primary" @click="createCharacter">创建</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  characters: {
    type: Array,
    required: true
  },
  selectedCharacter: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['select-character', 'create-character'])

const showCreateForm = ref(false)
const newCharacter = ref({ name: "", uuid: "" })

const selectCharacter = (character) => {
  emit('select-character', character)
}

const createCharacter = () => {
  if (!newCharacter.value.name  || !newCharacter.value.uuid)  {
    ElMessage.warning(' 请填写完整信息')
    return
  }

  emit('create-character', {
    name: newCharacter.value.name,
    uuid: newCharacter.value.uuid
  })

  newCharacter.value  = { name: "", uuid: "" }
  showCreateForm.value  = false
}

const handleClose = (done) => {
  if (newCharacter.value.name  || newCharacter.value.uuid)  {
    ElMessageBox.confirm(' 确定要取消创建角色吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      showCreateForm.value  = false
      newCharacter.value  = { name: "", uuid: "" }
    })
  } else {
    showCreateForm.value  = false
    done()
  }
}
</script>

<style scoped>
.character-list {
  width: 400px;
  padding: 20px;
  background-color: #13141f;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #4e7de4;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
}

.character-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.character-item:hover {
  background-color: rgba(78, 125, 228, 0.1);
  border-color: rgba(78, 125, 228, 0.3);
}

.character-item.active  {
  background-color: rgba(16, 185, 129, 0.15);
  border-left: 3px solid #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

.character-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.character-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.add-character {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: rgba(78, 125, 228, 0.2);
  color: #4e7de4;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}

.add-character:hover {
  background: rgba(78, 125, 228, 0.3);
  transform: translateY(-1px);
}

@media (max-width: 1200px) {
  .character-list {
    width: 100%;
    height: auto;
    display: flex;
    overflow-x: auto;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    order: 1;
  }

  .character-item {
    flex-direction: column;
    min-width: 80px;
    margin-right: 12px;
    margin-bottom: 0;
    text-align: center;
  }

  .character-avatar {
    margin-right: 0;
    margin-bottom: 6px;
  }

  .character-name {
    font-size: 12px;
  }

  .add-character {
    min-width: 120px;
    margin-top: 0;
    margin-left: 12px;
  }
}
</style>